<template>
  <div :class="MessageBgColor" class="videoRecord">
    <Videocam class="videoIcon" />
    <div>{{ JSON.parse(message.content).data || "" }}</div>
  </div>
</template>

<script setup lang="ts">
import { useUser } from "@/store/modules/user";
import { CallStatus, ISendRecordParams } from "@/types/call";
import { IMessage } from "@/types/chat";
import { Videocam } from "@vicons/ionicons5";
import { computed } from "vue";

const user = useUser();
defineProps<{
  message: IMessage;
}>();

const MessageBgColor = computed(() => {
  if (user.userId === props.message.sendId) return "bg-ChatMe text-white";
  const status = (JSON.parse(props.message.content) as ISendRecordParams).status;
  if (status === CallStatus.reject || status === CallStatus.cancel) return "bg-ChatOther text-red-500";
  if (status === CallStatus.end) return "bg-ChatOther text-green-400";
  return "bg-ChatOther text-fontPrimary";
});
</script>

<style lang="scss" scoped>
.videoRecord {
  display: flex;
  flex-direction: row;
  gap: 3px;
  max-width: 400px;
  overflow: hidden;
  align-items: center;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  font-size: 14px;
  padding: 10px;
  cursor: pointer;
  border-radius: 5px;
  .videoIcon {
    width: 16px;
    height: 16px;
  }
}
</style>
